<!-- 数据汇总页 -->
<template>
  <div id="firstDiv">
    <div style="display:flex;width: 100vw;justify-content: space-between;">
      <p>个人存款</p>
      <el-button @click="gouOut" style="height:40px;margin-right:50px;margin-top:10px">退出登录</el-button>
      </div>
      <hr>
      <p>筛选</p>
      <p>卡号</p>
      <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="input"
      id="look"
      style="width:40vw">
</el-input>
      <p>存款列表</p>
      <el-button icon="el-icon-plus" @click="addUser">添加</el-button>
      <el-button icon="el-icon-plus" @click="addUser1">开卡</el-button>
      <el-button @click="allContent">全部数据</el-button>
    <div>
        <el-table
    :data="tableData"
    style="width: 100%">

    <el-table-column
      label="卡号"
      width="480">
      <template slot-scope="scope">
        <span >{{ scope.row.id }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="存款金额"
      width="480">
      <template slot-scope="scope">
        <span >{{ scope.row.money }}</span>
      </template>
    </el-table-column>  

    <el-table-column
      label="状态"
      width="280">
      <template slot-scope="scope">
        <span >{{ scope.row.cardAction }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        input:"",
        tableData: [],
        inputShuju:this.$route.query.cardid,//用户输入的ID
        idIndex:''//当前点击的位置
      }
    },
    created(){
      const newTis=this
      Array.from(this.$store.state.userInfo).forEach((item,index)=>{//找出现在是哪一个ID
        if(item.cardId==newTis.inputShuju){
          newTis.tableData=newTis.$store.state.userInfo[index].cardNumber
          newTis.idIndex=index
        }
      })
    },
    methods: {
      gouOut(){//退出登录
        this.$router.push("/");
      },
      handleEdit(index, row) {//编辑函数
        this.$router.push({"name": "goin",query:{"infoIdex":this.idIndex,"infoIdex2":index,"row":row}});
        console.log(index, row);
      },
      handleDelete(index) {//删除函数
        this.$store.commit("delet",{"index2":index,"index1":this.idIndex})
      },
      addUser(){//添加用户，用vuex
        this.$router.push({"name": "goin",query:{"infoIdex":this.idIndex}});
      },
      addUser1(){//跳转到开卡界面，注意是已知
        this.$router.push({"name": "goin",query:{"infoIdex":this.idIndex,"typeOpen":"open"}});
      },
      allContent(){//列表出现所有数据
        this.tableData=this.$store.state.userInfo[this.idIndex].cardNumber
      }
    },
    mounted() {
    //回车键 进行查询 针对单独的button
    let newThis = this;
    document.querySelector("#look").onkeyup= function (e) {
      var key = window.event.keyCode;
      if (key == 13) {
        newThis.tableData=Array.from(newThis.$store.state.userInfo[newThis.idIndex].cardNumber).filter(
          (item)=>{
            return item.id==newThis.input
          }
        )
      }
    };
  },
}
</script>

<style lang="less" scoped>
#firstDiv{
    text-align: left;
}
</style>